<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Table</title>
    <link rel="stylesheet" href="plugins/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="css/global.css" media="all">
    <link rel="stylesheet" href="plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/table.css"/>
    <script type="text/javascript" src="../my/js/HOST.js"></script>
</head>

<body>
<div class="admin-main">
    <blockquote class="layui-elem-quote">
        <a href="javascript:;" class="layui-btn layui-btn-sm" id="add">
            <i class="layui-icon">&#xe608;</i> 新增一级机构
        </a>
        <a href="javascript:;" class="layui-btn layui-btn-sm" id="add2">
            <i class="layui-icon">&#xe608;</i> 新增二级机构
        </a>
    </blockquote>
    <div style="display: block; width: 180px; height: 496px; padding: 10px; border: 1px solid #ddd; overflow: auto;float: left">
        <h1>机构目录</h1>
        <hr class="layui-bg-black">
        <ul id="demo1"></ul>
    </div>
    <div id="content"
         style="display: block; padding: 10px; border: 1px solid #ddd; overflow: auto; vertical-align: top;margin-left: 215px;">
    </div>
</div>
<script type="text/javascript" src="plugins/layui/layui.js"></script>
<script type="text/javascript" src="js/Global.js"></script>

<script id="content_tpl" type="text/html">
    <div style="float: left;">
        <h3>机构详情</h3>
    </div>
    <div style="display: inline-block; float: right; height: 40px;">
        <div class="layui-btn-group">
            <button data-id="{{ d.data.id }}" id="edit" class="layui-btn layui-btn-primary layui-btn-sm"><i
                    class="layui-icon"></i></button>
            <button data-id="{{ d.data.id }}" id="del" class="layui-btn layui-btn-primary layui-btn-sm"><i
                    class="layui-icon"></i></button>
        </div>
    </div>

    <hr class="layui-bg-black">
    <div class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-inline">
                <input type="text" name="title" class="layui-input" disabled value="{{d.data.sort}}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-inline">
                <input type="text" name="title" class="layui-input" disabled value="{{d.name}}">
            </div>
        </div>
    </div>
</script>

<script>
    function createTree(node) {
        var arr = [];
        for (var i = 0; i < node.length; i++) {
            var menuF = new Object();
            menuF.name = node[i].name;
            menuF.data = {
                id: node[i].id,
                sort:node[i].sort,
                parentId: node[i].parentId
            };
            if (node[i].children) {
                var menuC = new Object();
                var menuChildren = [];
                for (var j = 0; j < node[i].children.length; j++) {
                    menuC = {
                        name: node[i].children[j].name,
                        data: {
                            id: node[i].children[j].id,
                            sort: node[i].children[j].sort,
                            parentId: node[i].children[j].parentId
                        }
                    };
                    menuChildren.push(menuC);
                }
                menuF.children = menuChildren;
            }
            arr.push(menuF);
        }
//        console.log(arr);
        return arr;
    }

    layui.config({
        base: 'js/'
    }).extend({
        busajax: 'busajax'
    });

    layui.use(['form', 'tree', 'layer', 'form', 'busajax', 'laytpl'], function () {
        var form = layui.form
            , laytpl = layui.laytpl
            , layer = layui.layer
            , $ = layui.jquery
            , bajax = layui.busajax;

        //获取机构目录
        var datas = {
            user: {
                id: getCookie('user') === "" ? "" : JSON.parse(getCookie('user')).id
            }
        };

        bajax.busajax('system.organization.getTreeOrganizationList', datas, null, function (result) {
            if (result.value == null)
                return ;
            layui.tree({
                elem: '#demo1' //指定元素
                , target: '_blank' //是否新选项卡打开（比如节点返回href才有效）
                , click: function (item) { //点击节点回调
//                    layer.msg('当前节名称：'+ item.data.id + '<br>全部参数：'+ JSON.stringify(item));
                    var getTpl = document.getElementById('content_tpl').innerHTML
                        , view = document.getElementById('content');
                    laytpl(getTpl).render(item, function (html) {
                        view.innerHTML = html;
                        //绑定删除按钮事件
                        $('#del').on('click', function () {
                            var _this = $(this);
                            layer.confirm('您确定要删除吗?', {
                                btn: ['确定', '取消'], //按钮
                                shade: false //不显示遮罩
                            }, function (index) {
                                // 提交表单的代码，需要你自己写，然后用 layer.close 关闭就可以了，取消可以省略
                                var organization = {
                                    organization: {
                                        id: _this.data('id')
                                    }
                                };
                                bajax.busajax('system.organization.deleteOrganization', organization, null);
                                layer.close(index);
                            });
                        });
                        $('#edit').on('click', function () {
                            edit($(this).data('id'));
                        });
                    });
                }
                , nodes: createTree(result.value)
            });

        }, false);


        var addBoxIndex = -1;
        $('#add').on('click', function () {
            if (addBoxIndex !== -1)
                return;
            //本表单通过ajax加载 --以模板的形式，当然你也可以直接写在页面上读取
            $.get('form/pOrganizationAdd.html', null, function (form) {
                addBoxIndex = layer.open({
                    type: 1,
                    title: '添加一级机构',
                    content: form,
                    btn: ['提交', '取消'],
                    shade: false,
                    offset: ['100px', '30%'],
                    area: ['600px', '400px'],
                    maxmin: true,
                    yes: function (index) {
                        //触发表单的提交事件
                        $('form.layui-form').find('button[lay-filter=edit]').click();
                    },
                    full: function (elem) {
                        var win = window.top === window.self ? window : parent.window;
                        $(win).on('resize', function () {
                            var $this = $(this);
                            elem.width($this.width()).height($this.height()).css({
                                top: 0,
                                left: 0
                            });
                            elem.children('div.layui-layer-content').height($this.height() - 95);
                        });
                    },
                    success: function (layero, index) {
                        //弹出窗口成功后渲染表单
                        var form = layui.form();
                        $('form.layui-form').find('input[name=createBy]').val(JSON.parse(getCookie('user')).id);
                        $('form.layui-form').find('input[name=updateBy]').val(JSON.parse(getCookie('user')).id);
                        form.render();
                        form.on('submit(edit)', function (data) {
                            var organization = {
                                organization: data.field
                            };
                            //这里可以写ajax方法提交表单
                            bajax.busajax('system.organization.insertOrUpdateOrganization', organization, index, function (result) {
                            })
                            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
                        });
                    },
                    end: function () {
                        addBoxIndex = -1;
                    }
                });
            });
        });

        var add2BoxIndex = -1;
        $('#add2').on('click', function () {
            if (add2BoxIndex !== -1)
                return;
            //本表单通过ajax加载 --以模板的形式，当然你也可以直接写在页面上读取
            $.get('form/cOrganizationAdd.html', null, function (form) {
                add2BoxIndex = layer.open({
                    type: 1,
                    title: '添加二级机构',
                    content: form,
                    btn: ['提交', '取消'],
                    shade: false,
                    offset: ['100px', '30%'],
                    area: ['600px', '400px'],
                    maxmin: true,
                    yes: function (index) {
                        //触发表单的提交事件
                        $('form.layui-form').find('button[lay-filter=edit]').click();
                    },
                    full: function (elem) {
                        var win = window.top === window.self ? window : parent.window;
                        $(win).on('resize', function () {
                            var $this = $(this);
                            elem.width($this.width()).height($this.height()).css({
                                top: 0,
                                left: 0
                            });
                            elem.children('div.layui-layer-content').height($this.height() - 95);
                        });
                    },
                    success: function (layero, index) {
                        //弹出窗口成功后渲染表单
                        var form = layui.form();
                        $('form.layui-form').find('input[name=createBy]').val(JSON.parse(getCookie('user')).id);
                        $('form.layui-form').find('input[name=updateBy]').val(JSON.parse(getCookie('user')).id);
                        form.render();
                        form.on('submit(edit)', function (data) {
                            var organization = {
                                organization: data.field
                            };
                            //这里可以写ajax方法提交表单
                            bajax.busajax('system.organization.insertOrUpdateOrganization', organization, index, function (result) {
                            })
                            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
                        });
                    },
                    end: function () {
                        add2BoxIndex = -1;
                    }
                });
            });
        });

        var editBoxIndex = -1;

        function edit(id) {
            if (editBoxIndex !== -1)
                return;
            //本表单通过ajax加载 --以模板的形式，当然你也可以直接写在页面上读取
            $.get('form/organizationEdit.html', null, function (form) {
                editBoxIndex = layer.open({
                    type: 1,
                    title: '编辑机构信息',
                    content: form,
                    btn: ['保存', '取消'],
                    shade: false,
                    offset: ['100px', '30%'],
                    area: ['600px', '400px'],
                    zIndex: 19950924,
                    maxmin: true,
                    yes: function (index) {
                        //触发表单的提交事件
                        $('form.layui-form').find('button[lay-filter=edit]').click();
                    },
                    full: function (elem) {
                        var win = window.top === window.self ? window : parent.window;
                        $(win).on('resize', function () {
                            var $this = $(this);
                            elem.width($this.width()).height($this.height()).css({
                                top: 0,
                                left: 0
                            });
                            elem.children('div.layui-layer-content').height($this.height() - 95);
                        });
                    },
                    success: function (layero, index) {
                        var organization = {
                            organization: {
                                id: id
                            }

                        };
                        var form = layui.form();
                        //这里可以写ajax方法获取表单
                        bajax.busajax('system.organization.get', organization, index, function (result) {
                            $('form.layui-form').find('input[name=sort]').val(result.value.sort);
                            $('form.layui-form').find('input[name=name]').val(result.value.name);
                            $('form.layui-form').find('input[name=id]').val(result.value.id);
                        }, false);
                        //弹出窗口成功后渲染表单
                        form.render();
                        form.on('submit(edit)', function (data) {
                            $('form.layui-form').find('input[name=updateBy]').val(JSON.parse(getCookie('user')).id);
                            var organization = {
                                organization: data.field
                            };
                            //这里可以写ajax方法提交表单
                            bajax.busajax('system.organization.insertOrUpdateOrganization', organization, index, function (result) {
                            })
                            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
                        });
                    },
                    end: function () {
                        editBoxIndex = -1;
                    }
                });
            });

        }

    });
</script>
</body>

</html>